<template>
    <div class="list-wrap">
        <!-- <van-list :finished="finished" loading-text="يۈكسىلىۋاتىدۇ" error-text="مەغلۇپ بولدى" :offset="50" v-model="loading" @load="onLoad" :error.sync="error"> -->
        <!-- </van-list> -->
            <waterfall ref="waterFall" :col="3" :data="list" :loadDistance="500" @scroll="onScroll">
                <template>
                    <VideoCover v-for="(item, index) in list" :key="index" :info="item" />
                </template>
            </waterfall>
            <!-- <div class="list">
                <VideoCover :show="true" v-for=" (item,index) in list" :key="index" :info="item"></VideoCover>
            </div> -->
        <!-- 如果结果为空 -->
        <div class="empty" v-if="emptyList">
            <div class="notice">تۈگەپتۇ</div>
        </div>
    </div>
</template>

<script>
import VideoCover from "@/components/VideoCover.vue";
import { shareFrend, shareMoments ,throttle } from "@/utils";
import {Toast} from 'vant'   
import { mapState } from 'vuex'
export default {
    components: { VideoCover},
    data() {
        return {
            list: [],
            emptyList: false,
            pageSize: 18,
            pageNum: 0,
            finished: false,
            loading: false,
            error: false
        };
    },
    mounted() {
        this.getList();
        shareMoments(this);
        shareFrend(this);
        this.$nextTick(()=>{
            window.scrollTo(0,0);
        })
    },
    methods: {
        getList() {
            this.loading = true;
            this.pageNum++;
            let { from, sort, query } = this.$route.query;
            this.$http
                .post("/getVideo", {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    from,
                    sort: sort ? sort : null,
                    query: query ? unescape(query) : ""
                })
                .then(res => {
                    if (res.list.length < this.pageSize) {
                        this.finished = true;
                    }
                    this.list = this.list.concat(res.list);
                    // this.$waterfall.forceUpdate()
                    this.loading = false;
                })
                .catch(err => {
                    this.loading = false;
                    this.error = true;
                    Toast(err);
                });
        },
        onScroll:throttle(function(e){
            this.scroll(e)
        },300),
        scroll(scrollData){
            let bodyHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            if(!this.loading && !this.finished && scrollData.scrollHeight+scrollData.scrollTop > bodyHeight - 400){
               this.getList();
            }   
        },
    },
    computed: {
        ...mapState(['sortChange'])
    },
    watch: {
        sortChange(val) {
            console.log(val)
            this.list = [];
            this.pageNum = 0;
            this.getList();
        }
    },
};
</script>

<style lang="scss" scoped>
.list-wrap {
    // width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    margin: 0 auto;
    padding: 0 1vw;
    // 宝藏代码
    /* .list {
        display: flex;
        justify-content: space-between;
        padding: 0 1%;
        flex-wrap: wrap;
        &::after {
                content: "";
                width: 32%; 
                display: block; 
                height:0; 

        }
    } */
}
</style>